<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <table border="1" width="300">
    <tr>
      <td>DATA</td>
      <td>DATA</td>
      <td>DATA</td>
      <td>DATA</td>
    </tr>
    <tr>
      <td>DATA</td>
      <td>DATA</td>
      <td>DATA</td>
      <td>DATA</td>
    </tr>
    <tr>
      <td>DATA</td>
      <td>DATA</td>
      <td>DATA</td>
      <td>DATA</td>
    </tr>
  </table>
</body>
<script>
  
  // 非事件委托版
  // var tds = document.querySelectorAll("td");
  // for(var i=0;i<tds.length;i++){
  //   tds[i].onclick = function(){
  //     // 创建输入框
  //     var ipt = document.createElement("input");
  //     // 将td的内容设置到输入框
  //     ipt.value = this.innerHTML;
  //     // 清空td
  //     this.innerHTML = "";
  //     // 将输入框插入td
  //     this.appendChild(ipt);
  //     // 阻止输入框的点击事件冒泡（为了获取焦点）
  //     ipt.onclick = function(eve){
  //       var e = eve || window.event;
  //       e.stopPropagation();
  //     }
  //     // 保存当前td
  //     var td = this;
  //     // 输入框失去焦点时
  //     ipt.onblur = function(){
  //       // 将输入框内容设置回当前td
  //       td.innerHTML = ipt.value;
  //     }
  //   }
  // }

  // 事件委托版
  var table = document.querySelector("table");
  table.onclick = function(eve){
    var e = eve || window.event;
    var target = e.target || e.srcElement;
    if(target.tagName === "TD"){
      // 创建输入框
      var ipt = document.createElement("input");
      // 将td的内容设置到输入框
      ipt.value = target.innerHTML;
      // 清空td
      target.innerHTML = "";
      // 将输入框插入td
      target.appendChild(ipt);
      // 输入框失去焦点时
      ipt.onblur = function(){
        // 将输入框内容设置回当前td
        target.innerHTML = this.value;
      }
    }
  }

</script>
</html>